import React, { useEffect, useState } from 'react';
import { getNewSong } from '@/api/recommend'
import { getSongDetail, getSongUrl, getLyric } from '@/api/details'
import { setSongInfo } from '../../store/modules/songInfo';
import { Card} from 'antd';
import newStyle from '@/styles/recommendNew.module.scss'
import { useDispatch } from 'react-redux';
import { useRef } from 'react';

import { useNavigate } from 'react-router-dom';

export default function RecommendNew() {
  const [newSongData, setNewSongData] = useState([])
  let playData = {}
  const playDataRef = useRef(playData)
  
  const navigate = useNavigate();
  const toDetail = (id) => {
    console.log(id);
    navigate(`/songs/details/${id}`);
  };

  //歌曲播放时长
  const formatTime = (milliseconds) => {
    let totalSeconds = Math.floor(milliseconds / 1000);
    let minutes = Math.floor(totalSeconds / 60);
    let seconds = Math.round(totalSeconds % 60);
    let formattedTime = (minutes < 10 ? "0" : "") + minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
    return formattedTime;
  }
  const dispatch = useDispatch()
  const getSongData = ()=> {
    getNewSong().then(res => {
     setNewSongData(res.data.result)
    })
  }

  const getDetailData = (id) => {
    getSongDetail({ ids: id }).then(res => {
      playDataRef.current = {
        ...playDataRef.current,
        name: res?.data?.songs?.[0]?.al?.name,
        cover: res?.data?.songs?.[0]?.al?.picUrl,
        artist: res?.data?.songs?.[0]?.ar
          .map((item) => {
            return item?.name;
          })
          .join(","),
      }
    })
    getLyric({ id }).then(res => {
      playDataRef.current = {
        ...playDataRef.current,
        lrc: res.data.lrc.lyric,
      }
    })
    getSongUrl({
      id,
      level: 'standard'
    }).then(res => {
      playDataRef.current = {
        ...playDataRef.current,
        url: res.data.data?.[0].url,
      }
      console.log(playDataRef.current);
      dispatch(setSongInfo(playDataRef.current))
    })
  }

  useEffect(() => {
    getSongData()
    // getLyricData()
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
  
  return (
    <>
    
      {
        newSongData && newSongData.map((item, i) => {
          return <Card
            className={newStyle.song}
            hoverable
            key={item.id}
            style={{ width: 1200, height: 128,position:'relative',left:'10%' }}
            onClick={() => toDetail(item.id)}
          >
            <div>
              <div style={{ width: 80 }}>
                {i < 9 ? '0' + (i + 1) : i + 1}
              </div>
              <img alt="example" src={item.picUrl}
                 onDoubleClick={() => { return ( getDetailData(item.id))}}
              />
            </div>
            <section style={{ fontWeight: 900 }}>{item.name}</section>

            <section>{item.song.artists.map((item, i) => {
              if (i !== 0) {
                return '/' + item.name
              } else {
                return item.name
              }
            })}</section>
            <section>{item.song.album.name}</section>

            <section>{formatTime(+item.song.bMusic.playTime)}</section>
          </Card >
        })

      }

    </>)

}

